<template>
	<view class="container">
		<view class="tabbar">
			<view class="tabs">
				<view class="tab border-r" :class="State==-1?'select':''" @click="Tab(-1)">全部</view>
				<view class="tab border-r" :class="State==0?'select':''" @click="Tab(0)">待处理</view>
				<view class="tab border-r" :class="State==1?'select':''" @click="Tab(1)">已处理</view>
				<view class="search" @click="OpenSearch"><image src="/static/search2.png"/></view>
			</view>
			<view class="report border-tb"><view class="blue">总数:{{TotalCount}}</view><view class="red">未缴:{{NoPayCount}}</view><view class="green">已缴:{{HasPayCount}}</view><!-- <view>缴费率:{{PayPercent}}%</view> --></view>
		</view>
		<view class="line border-b">
			<view class="icon"><image src="/static/menu.png"></image></view>
			<view class="name">{{Title}}<font class="green right"></font></view>
		</view>
		<view class="list border-b" @click="ParkAdd(item.ID)" v-for="item in List">
			<view class="circle">{{item.CarNum.substring(0,1)}}</view>
			<view class="info"><view class="top"><view class="realname">{{item.CarNum}}</view><view class="gaozhi">{{item.ParkCount}}次</view></view><view class="brief">{{item.CarType+"("+item.CarColor+")"+(item.RealName!=''?'('+item.RealName+')':'')}}</view></view>
			<view class="right"><view class="state" :class="''+Tools.ParkStateColor(item.State)">{{item.StateText}}</view><view class="date">{{item.CreateDate.ToDayTime()}}</view></view>
		</view>
		<view class="nodata" v-if="NoData"></view>
		<view class="loadmore">{{Tip}}</view>
		<view class="dialog" v-if="ShowSearch">
			<view class="meng" @click="CloseSearch"></view>
			<view class="forms">
				<view class="title">关键词搜索</view>
				<view class="lines"><input type="text" placeholder="车牌号/姓名/联系电话" auto-focus="true" @input="InputKeyword"/></view>
				<view class="btns" @click="Search">搜索</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				Title:'违停处理列表',
				State:-1,
				ParkType:-1,
				Keyword:'',
				Tip:'正在加载...',
				Page:1,
				List:[],
				NoData:false,
				LoadMore:true,
				ShowSearch:false,
				TotalCount:0,
				NoPayCount:0,
				HasPayCount:0,
				PayPercent:0
			};
		},
		onPullDownRefresh() {
			this.Re_Load();
		},
		onReachBottom() {
			if(this.LoadMore){
				this.Page++;
				this.Find_Pager();
			}
		},
		onShow() {
			uni.$once("Success", item=>{
				this.Re_Load();
			})
			uni.$once("PaySuccess", ID=>{
				this.List.forEach(item=>{
					if(item.ID==ID){
						item.State=1;
						item.StateText='已缴费';
					}
				});
			})
			
		},
		onUnload() {
			uni.$off("Success");
			uni.$off("PaySuccess");
		},
		onLoad(options) {
			this.Find_Pager();
		},
		methods:{
			Tab(State){
				this.State=State;
				this.Re_Load();
			},
			InputKeyword(e){
				this.Keyword=e.detail.value;
			},
			OpenSearch(){
				this.Keyword="";
				this.ShowSearch=true;
			},
			CloseSearch(){
				this.ShowSearch=false;
			},
			Search(){
				this.ShowSearch=false;
				this.Re_Load();
			},
			ParkAdd(ID){
				uni.navigateTo({
					url:'parkadd?ID='+ID
				})
			},
			Find_Pager(){
				var data={};
				data.Act="Find_Park";
				data.Page=this.Page;
				data.Limit=20;
				data.Keyword=this.Keyword;
				data.State=this.State;
				data.Order="State asc, ID";
				data.Desc="asc";
				this.Util.Loading("加载中...");
				this.Util.Post(data, json=>{
					this.Keyword="";
					this.TotalCount = json.Data.TotalCount;
					this.NoPayCount = json.Data.NoPayCount;
					this.HasPayCount = json.Data.HasPayCount;
					this.PayPercent = json.Data.PayPercent;
					this.Util.HideLoading();
					uni.stopPullDownRefresh();
					if(this.Page==1){
					 	this.List= json.Data.List;
					}else{
						this.List= this.List.concat(json.Data.List);
					}
					if(json.Data.Count==0){
						this.NoData=true;
						this.Tip="没有找到任何数据";
					}
					else if(this.List.length>=json.Data.Count){
						this.LoadMore=false;
						this.Tip="我是有底线的";
					}
				});
			},
			Re_Load(){
				this.List=[];
				this.Page=1;
				this.NoData=false;
				this.LoadMore=true;
				this.Tip='正在加载...';
				this.Find_Pager();
			}
		}
	}
</script>

<style lang="scss">
.container{width:100%; padding-top:170rpx;
	.tabbar{width:100%; height:170rpx; position: fixed; top:0rpx; left:0rpx; overflow: hidden; z-index:100;
		.tabs{display:flex; flex-direction: row; line-height: 100rpx; 
			.tab{flex:1; height:100%; text-align:center; font-size:36rpx; background-color: #f7f7f7;}
			.search{width:120rpx; height:100rpx; text-align: center; background-color: #ffffff; image{width:50rpx; height: 50rpx; margin-top:25rpx;}}
			.select{background-color: #ffffff; color:#f3740f;}
		}
		.report{width:100%; height:70rpx; line-height: 70rpx; padding-left:20rpx; padding-right: 20rpx; background-color: #ffffff; display: flex; flex-direction: row; justify-content: space-between;}
	}
	.line{width:100%; height:100rpx; line-height: 100rpx;  padding-left:20rpx; display: flex; flex-direction: row; background-color: #ffffff;
		.icon{width:auto; height:100rpx; line-height: 100rpx; padding-top:9rpx; image{width:40rpx; height:40rpx;}}
		.name{flex:1; padding-left:10rpx; font-size:32rpx;}
		.tabstate{width:auto; height:60rpx; margin-top:20rpx; margin-right:10rpx; display: flex; flex-direction: row;
			.state{width:auto; height:60rpx; background-color: #efefef; border-radius:6rpx; line-height:60rpx; padding-left:20rpx; padding-right: 20rpx; margin-right: 15rpx;}
			.select{background-color: #0a9afe; color:#ffffff; border-radius:6rpx;}
		}
	}
	.list{width:100%; height:150rpx; padding-left:20rpx; padding-right: 20rpx; padding-top:15rpx; background-color: #ffffff; display: flex; flex-direction: row;
		.circle{width:120rpx; height:120rpx; line-height: 120rpx; text-align: center; border-radius: 60rpx; font-size:46rpx; color:#ffffff; background-color: #cfcfcf;}
		.info{flex:1; height: 100%; overflow: hidden; padding-left:15rpx;
			.top{width:100%; display: flex; flex-direction: row;
				.realname{width:auto; height:70rpx; padding-top:6rpx; font-size:40rpx; color:#7c9692;}
				.gaozhi{width:auto; height:34rpx; line-height: 34rpx; margin-left:10rpx; padding-left:10rpx; padding-right:10rpx; margin-top:15rpx; color:#ffffff; background-color: #fd8a2f; border-radius: 20rpx; font-size:26rpx;}
				.chufa{width:auto; height:34rpx; line-height: 34rpx; margin-left:10rpx; padding-left:10rpx; padding-right:10rpx; margin-top:20rpx; color:#ffffff; background-color:#fe0321; border-radius: 20rpx; font-size:26rpx;}
			}
			.brief{width:100%; height:36rpx; line-height: 36rpx; font-size:32rpx; overflow: hidden; color:#a9a9a9;}
		}
		.right{width:160rpx; text-align: right;
			.state{height:60rpx; line-height: 60rpx; font-size:32rpx;}
			.date{height:60rpx; line-height: 60rpx; font-size:30rpx; color:#808080;}
		}
	}
	.list:active{background-color: #f6f6f6;}
	
}
</style>